<template>
	<app-page>
		<wd-config-provider :theme="theme">
			<view class="container">
				<wd-form>
					<view class="card form-item" v-for="(item,index) in fields" :key="index">
						<wd-textarea v-model="formData[item.field_name]" v-if="item.field_type === 'Textarea'"
							:placeholder="'请输入'+item.field_comment" />
						<wd-input v-model="formData[item.field_name]" v-if="item.field_type === 'Input'"
							:placeholder="'请输入'+item.field_comment" />
						<cityPicker v-model="formData[item.field_name]" v-if="item.field_type === 'City'"
							:placeholder="'请输入'+item.field_comment">
						</cityPicker>
					</view>

					<view class="submit">
						<wd-button type="success" @click="submit"
							custom-class="wd-button-custom-class-my-success square wd-button-custom-class-w100">
							<text>提交</text>
						</wd-button>
					</view>
				</wd-form>
			</view>
		</wd-config-provider>
	</app-page>
</template>

<script lang="ts">
	import { defineComponent, ref } from 'vue';

	import { onLoad } from '@dcloudio/uni-app';
	import useRouter from '@/hooks/useRouter';
	import { getImCasePerFect, saveImCaseInfo, paymentImCase, queryCaseOrderInfo } from '@/api/index';
	import WxPay from "@/libs/WxPay"
	export default defineComponent({
		name: '',
		components: {},
		setup(props, ctx) {
			// 日间light、夜间dark主题
			const router = useRouter();
			const theme = ref('light');
			const orderId = ref(0)
			const categoryId = ref(0)
			const fields : any = ref([]);
			const formData : any = ref({});
			const submit = () => {
				saveImCaseInfo({
					anjian_order_id: orderId.value,
					...formData.value
				}).then((res : any) => {
					let wxPay = new WxPay();
					console.log(res, orderId)
					wxPay.pay({
						orderId: orderId.value,
						type: 2
					}, {
						fail: () => {
							uni.$wdToast.show("取消支付")
						},
						getOrderCb: () => {
							uni.$wdToast.show("支付成功")
							setTimeout(() => {
								router.back({
									delta: 1,
								}) // 跳转到案件列表页面，name为caseList，需在router.ts中定义
							}, 1000); // 延迟1秒跳转页面
						}
					})


					// paymentImCase({
					// 	anjian_order_id: orderId.value,
					// }).then((res : any) => {
					// 	uni.$wdToast.show("支付成功")
					// 	setTimeout(() => {
					// 		router.back({
					// 			delta: 1,
					// 		}) // 跳转到案件列表页面，name为caseList，需在router.ts中定义
					// 	}, 1000); // 延迟1秒跳转页面
					// });
				});
			}
			const initFields = (categoryId) => {
				getImCasePerFect({
					category_id: categoryId,
				}).then((res : any) => {
					fields.value = res;
					for (let key in res) {
						formData.value[res[key].field_name] = '' // 初始化表单数据对象formData的属性值
					}
				});
			}
			onLoad((params : any) => {
				orderId.value = params.orderId;

				if (params.categoryId) {
					categoryId.value = params.categoryId;
					initFields(params.categoryId);
				} else {
					queryCaseOrderInfo({
						anjian_order_id: orderId.value,
					}).then((res : any) => {
						initFields(res.category_id);
					});
				}


			})
			return {
				theme,
				fields,
				formData,
				submit
			};
		}
	});
</script>
<!-- #ifdef MP-WEIXIN -->
<style lang="less">
	page {
		background-color: #f2f2f2;
	}
</style>
<!-- #endif -->
<style lang="less" scoped>
	page {
		background: #f2f2f2;
	}

	.container {
		padding: 24rpx;

		.form-item {
			margin-bottom: 24rpx;
			overflow: hidden;

			:deep(.wd-textarea) {
				padding: 24rpx;
			}

			:deep(.wd-input) {
				padding: 0 24rpx;

				.wd-input__inner {
					height: 44px;
					line-height: 44px;
				}
			}
		}

		.submit {

			width: 100%;
			display: flex;

			justify-content: space-between;
			align-items: center;

			.square {
				flex: calc((100% - 27rpx) / 2);
				margin: 0;
				min-width: auto;

				.wd-button__text {
					display: flex;
					align-items: center; // 垂直居中
					justify-content: center; // 水平居中
					flex-direction: column; // 子元素垂直排列
				}
			}
		}
	}
</style>